<template>
  <!-- 1 st秒杀活动列表 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>

  <div class="con_container">
    <div class="search">
      <div class="search_top">
        <span> 筛选搜索</span>
        <span>
          <el-button>重置</el-button>
          <el-button type="primary" @click="onSearch">查询搜索</el-button>
        </span>
      </div>
      <div class="ipt_box">
        <el-form label-width="100px">
          <el-form-item label="活动名称">
            <el-input
              type="text"
              placeholder="活动名称"
              v-model="nickname"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="add_box">
      <span>数据列表</span>
      <span>
        <el-button @click="goFlashSession">秒杀时间段列表</el-button>
        <el-button @click="changeTableDataList('', 1)">添加活动</el-button>
      </span>
    </div>
    <!-- 列表数据 -->
    <div class="table_list">
      <el-table :data="tableData.list" style="width: 100%" :border="true">
        <el-table-column type="selection" width="80" />
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="title" label="活动标题" />
        <el-table-column label="活动状态" width="130">
          <template #default="scope">
            <span>{{
              scope.row.status === 1 ? "活动开始了" : "活动未开始"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="180">
          <template #default="scope">
            <div>
              {{
                scope.row.startDate
                  ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="180">
          <template #default="scope">
            <div>
              {{
                scope.row.endDate
                  ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <!-- 自定义列模板 -->
        <el-table-column label="上线/下线">
          <template #default="scope">
            <el-switch
              @click="changeStatus(scope.row.id, scope.row.status)"
              :model-value="scope.row.status === 1 ? true : false"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="187" flex="right">
          <template #default="scope">
            <span class="spn1" @click="setupFun(scope.row.id)">设置商品</span>
            <span class="spn1" @click="changeTableDataList(scope.row, 2)"
              >编辑</span
            >
            <span class="spn2" @click="delDataFun(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="foot_box">
      <el-pagination
        v-model:current-page="tableData.pageNum"
        v-model:page-size="tableData.pageSize"
        background
        :page-sizes="[1, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 删除 -->
    <el-dialog v-model="dialogVisible" title="" width="30%">
      <span>确定要删除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="delListData2" type="primary"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="addTimeout" title="添加活动" width="30%">
      <template #footer>
        <div class="example_basic">
          <div><span>秒杀时间段：</span><el-input v-model="timeName" /></div>
          <div>
            <span>开始时间段：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="请填入开始时间"
            />
          </div>
          <div>
            <span>结束时间段：</span>
            <el-date-picker
              v-model="value2"
              type="date"
              placeholder="请填入结束时间"
            />
          </div>
          <div>
            <span>是否启用</span
            ><span
              ><div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                  <el-radio label="0" size="large">上线</el-radio>
                  <el-radio label="1" size="large">下线</el-radio>
                </el-radio-group>
              </div></span
            >
          </div>
          <div>
            <el-button @click="addTimeout = false">取消</el-button>
            <el-button type="primary" @click="addTimeoutFun">确认</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import router from "../../router";
import Breadcrumb from "../../components/breadcrumb.vue";
let msg = ref("秒杀活动列表");
let txt = ref("营销");
let path1 = ref("sms/flash");
let aaa = ref(0);

// 编辑
const myKeyword = ref(0);
const radio1 = ref(1);
const timeName = ref("");
const value1 = ref();
const value2 = ref();
let addTimeout = ref(false);
let myKeyId = ref(0);
const changeTableDataList = (tableList: any, val: number) => {
  addTimeout.value = true;
  timeName.value = tableList.title;
  myKeyId.value = tableList.id;
  myKeyword.value = val;
};
const addTimeoutFun = () => {
  if (myKeyword.value === 2) {
    api.flashlist.FlashUpdateApi({
      id: myKeyId.value,
      endDate: value2.value,
      title: timeName.value,
      startDate: value1.value,
      status: radio1.value,
    });
    getProductList();
    addTimeout.value = false;
  } else if (myKeyword.value === 1) {
    api.flashlist.FlashCreate({
      endDate: value2.value,
      title: timeName.value,
      startDate: value1.value,
      status: radio1.value,
    });
    getProductList();
    addTimeout.value = false;
  }
};
// 设置商品
let setupFun = (id: any) => {
  router.push({ path: "/sms/selectSession", query: { flashPromotionId: id } });
};
// 跳转到秒杀时间列表
let goFlashSession = () => {
  router.push({ path: "/sms/flashSession" });
};

// 删除
let dialogVisible = ref(false);
let delId = ref(0);
let delDataFun = (myid: number) => {
  delId.value = myid;
  dialogVisible.value = true;
};
let delListData2 = () => {
  api.flashlist.FlashDeleteApi({
    id: delId.value,
  });
  getProductList();
  dialogVisible.value = false;
};
// 修改上下线状态
let changeStatus = (myId: number, myStatus: number) => {
  if (myStatus === 1) {
    api.flashlist.FlashUpdateStatusApi({
      id: myId,
      status: 0,
    });
    getProductList();
  } else if (myStatus === 0) {
    api.flashlist.FlashUpdateStatusApi({
      id: myId,
      status: 1,
    });
    getProductList();
  }
};
// 搜索请求
// 定义搜索数据
let nickname = ref("");
let onSearch = () => {
  if (nickname.value === "") {
    getProductList();
    console.log("请求所有数据");
    return;
  }
  console.log("请求搜索数据");
  api.flashlist
    .flashListApi({
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      keyword: nickname.value,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
// 列表数据
let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});

// 获取所有商品数据的请求
let getProductList = () => {
  api.flashlist
    .flashListApi({
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      keyword: "",
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
getProductList();

let handleSizeChange = (val: number) => {
  // console.log(val);
  tableData.pageSize = val;
  getProductList();
};
// 改变当前页数
let handleCurrentChange = (val: number) => {
  // console.log(val);
  tableData.pageNum = val;
  getProductList();
};
</script>

<style lang="scss" scoped>
.el-dialog {
  padding: 0;
  margin: 0;
  .el-id-7979-21 {
    padding: 0;
  }
  .example_basic {
    font-size: 14px;
    margin-right: 30px;
    margin-bottom: 40px;

    div {
      margin: 10px;
    }

    span {
      display: inline-block;
      //   width: 90px;
      padding: 0;
      margin: 0;
      margin-right: 10px;
    }
  }
}
//table表格
:deep .el-table .el-table__cell {
  text-align: center !important;
}
:deep .el-table thead {
  font-weight: bold !important;
}
.con_container {
  padding: 10px 20px !important;
  margin-top: 20px;
}
.search {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  .search_top {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
    width: 200px;
  }
  .ipt_box {
    display: flex;
    flex-wrap: wrap;
  }
}
.add_box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 20px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
img {
  height: 100px;
  width: 150px;
}
.table_list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.el-pagination {
  font-size: 12px;
  float: right;
}
.foot_box {
  margin-top: 20px;
  float: right;
}
.spn1,
.spn2 {
  color: skyblue;
  padding: 5px;
  cursor: pointer;
}

.el-input {
  width: 200px;
}
.con_container {
  padding: 10px 20px !important;
  margin-top: 20px !important;
}
</style>
